<template>
	<view>
		<!--  #ifndef MP-WEIXIN || MP-ALIPAY -->
		<form @submit="login">
			<view class="cu-form-group">
				<view class="title">手机号</view>
				<input placeholder="请输入手机号" class="text-left" name="phone" :value="form.phone" @blur="validatePhone" ></input>
				<view v-if="phoneError" class="validation-error">{{ phoneError }}</view>
			</view>
			
			<view class="cu-form-group styMargin">
				<view class="title">密码</view>
				<input placeholder="请输入密码" type="password" class="text-left" name="password" :value="form.password" @blur="validatePasswoed"></input>
				<view v-if="passwordError" class="validation-error" >{{ passwordError }}</view>
			</view>
			
			<view>
				<button class="cu-btn shadow-blur block margin-tb-sm bottom-btn" style="margin-top: 28px;" :class="'bg-'+ theme.themeColor"
					formType="submit">登录</button>
			</view>
		</form>
		<!--  #endif -->
		
		<!--  #ifdef MP-WEIXIN || MP-ALIPAY-->
		<view>
			<button class="cu-btn shadow-blur block margin-tb-sm bottom-btn" :class="'bg-'+ theme.themeColor"
				open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">快速登录</button>
		</view>
		<!--  #endif -->
	</view>
</template>
<script>
	import validate from '@/utils/validate'
    import regMix  from '@/mixins/regular.js'
	import store from '@/store'
    export default {
	    mixins: [regMix],
		data() {
			return {
				theme: getApp().globalData.theme,
				form: {
					phone:'',
					password:''
				},
			};
		},
		props: {
			redirectUrl: { //重定向页面
				type: String,
				default: '/pages/home/index'
			}
		},
		methods: {
			login(e) {
				let form = e.detail.value;
				if (!form.phone) {
					this.phoneError = '请输入手机号';
				}
				if (!form.password) {
					this.passwordError = '请输入密码';
					return;
				}
				if (!validate.validateMobile(form.phone)) {
					this.phoneError = '请输入正确的手机号';
					return;
				}
				
				if(form.password.length < 6 || form.password.length > 18) {
				    this.passwordError = '密码长度应为6-18位';
				    return;
				}
				if(!/[A-Z]/.test(form.password)) {
				    this.passwordError = '密码应至少包含一个大写字母';
				    return;
				}
				if(!/[a-z]/.test(form.password)) {
				    this.passwordError = '密码应至少包含一个小写字母';
				    return;
				}
				if(!/\d/.test(form.password)) {
				    this.passwordError = '密码应至少包含一个数字';
				    return;
				}
				
				console.log(store.getters.errorMessage)
				this.$store.dispatch("UserPwdLogin", form).then(() => {
					uni.showToast({
						title: '登录成功',
						icon: 'none',
						duration: 3000
					});
					uni.reLaunch({
						url: this.redirectUrl ? decodeURIComponent(this.redirectUrl) : '/pages/home/index',
						success: () => {
							let page = getCurrentPages().pop();
							if (page) {
								console.log(page)
								page.onLoad(page.options); //执行上个页面的方法
							};
						}
					});
				}).catch(() => {
					const paswrd = store.getters.errorMessage
					const userErr = store.getters.errorUserName
					if(userErr){
						this.phoneError = userErr
					}else if(paswrd){
						this.passwordError = paswrd
					}
				})
			},
			/**
			 * 微信小程序手机号登录
			 */
			getPhoneNumber(e) {
				if (e.detail) {
					this.$store.dispatch("MaPhoneLogin", Object.assign({
						// #ifdef MP-ALIPAY
						loginType: "ALIPAY_PHONE_LOGIN"
						// #endif
						// #ifdef MP-WEIXIN
						loginType: "WECHAT_PHONE_LOGIN"
						// #endif
					}, e.detail)).then(() => {
						uni.showToast({
							title: '登录成功',
							icon: 'none',
							duration: 3000
						});
						uni.reLaunch({
							url: this.redirectUrl ? decodeURIComponent(this.redirectUrl) :
								'/pages/home/index',
							success: () => {
								let page = getCurrentPages().pop();
								if (page) {
									page.onLoad(page.options); //执行上个页面的方法
								};
							}
						});
					}).catch(() => {})
				}
			
			},
		},
	}
</script>

<style lang="scss">
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.validation-error {
	  color: red;
	  font-size: 12px;
	}
</style>
